<template>
    <page flex="dir:top">
        <m-header2 icon="icon-yijianjiayou1 f18" class="h50 color f16 shadow">
            <span class="text">{{shopName}}</span>
            <span slot="right" v-if="$g.shopList.length > 1" v-back>重新定位</span>
        </m-header2>
        <p class="h44 px12 f16 white tc" style="background-color: #FF5722">请选择油枪号</p>
        <roll flex-box="1">
            <m-loading :show="loadStatus == null" class="absfit"></m-loading>
            <checker v-model="gunId" default-item-class="item" selected-item-class="active" radio-required
                     class="mylist">
                <checker-item v-for="(i, index) in gunList" :value="i.id || i.gunCode" :key="index"
                              @click.native="onClick(i)">
                    <div flex="dir:top main:center">
                        <p class="f18 guncode">{{i.gunCode}}号枪</p>
                        <p class="mt8 text tr f16">{{i.oilCode | oilName}}</p>
                    </div>
                </checker-item>
            </checker>
            <div class="h54"></div>
        </roll>
    </page>
</template>
<script>
  import { Checker, CheckerItem } from 'vux'
  import urljoin from 'url-join'

  export default {
    data () {
      const {shopName, id: shopId, clientUrl} = this.$route.params
      return {
        loadStatus: false,
        clientUrl,
        shopId,
        shopName,
        gunList: [],
        gunId: null
      }
    },
    async created () {
      // 获取油枪信息
      const {obj} = await this.$get_states(urljoin(this.clientUrl, '/oil/getOilTank'))
      const list = []
      obj.forEach(x => {
        x.oilgun.split(',').forEach(i => {
          list.push({
            price: null,
            gunCode: i,
            oilCode: x.oilname
          })
        })
      })
      list.sort((a, b) => a.gunCode - b.gunCode)
      this.gunList = list
    },
    computed: {},
    methods: {
      onClick ({gunCode, oilCode}) {
        const {shopId, shopName, clientUrl} = this
        this.$router.push({
          name: 'yjjy_xxdj_oderList',
          params: {gunCode, oilCode, clientUrl, shopId, shopName}
        })
      }
    },
    components: {
      Checker,
      CheckerItem
    },
    watch: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../../css/variable';

    $space: 10px;
    .mylist {
        margin-left: -$space;
        padding: 0 15px;
    }

    .item {
        $h: 70px;
        width: 33.33%;
        padding: $space 0 0 $space;
        div {
            height: $h;
            border-radius: 5px;
            padding: 5px;
            background-color: white;
            box-shadow: 0 2px 2px rgba(0,0,0,.125);
        }
        .guncode {
            color: #3559a7;
        }
        &.active div {
            border: 2px solid #3559a7;
        }
    }

    .top50 {
        top: 54px;
    }

    .vux-tap-active:active {
        background-color: transparent;
    }

    .color {
        color: #3559a7;
    }
</style>
